<template>
    <div class="page-container">
        <el-card class="box-card">
            <el-steps :active="active" align-center >
                <el-step title="添加TXT"  />
                <el-step title="添加指向值"  />
                <el-step title="完成"  />
            </el-steps>
            <div class="container-item">
                <template v-if="active == 1">
                    <div>
                        <div>1、请复制记录值，在第三方域名提供商中，添加TXT记录类型到主机记录verify中：</div>
                        <el-table :data="tableData" class="demo-tabs" size="small" style="width: 70%">
                            <el-table-column prop="recordType" label="记录类型" width="180" />
                            <el-table-column prop="hostRecord" label="主机记录" width="180" />
                            <el-table-column prop="recordValue" label="记录值" />
                            <el-table-column label="操作" width="120">
                                <template #default="scope">
                                    <el-button @click="copyRecordValue(scope.row)">复制</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <div style="margin-top: 80px;">
                        <div>2、请输入已添加TXT记录值的域名进行下一步绑定：</div>
                        <div style="margin-top: 10px;">
                            <span>添加www前缀：</span>
                            <el-switch v-model="type" size="small" :active-value="0" :inactive-value="1"></el-switch>
                        </div>
                        <div style="display: flex; margin-top: 20px;">
                            <el-input v-if="type == 0" v-model="httpHead" readonly="readonly" style="width: 120px;"/>
                            <div v-if="type == 0" style="margin: 0 5px; font-weight: bold; margin-top: 20px;">.</div>
                            <el-input v-model="httpValue" :style="{width: '230px', marginRight: type == 0?'20px':'0px'}"/>
                            <div v-if="type == 1" style="margin: 0 5px; font-weight: bold; margin-top: 20px;">.</div>
                            <el-input v-if="type == 1" v-model="hostSuffix" style="width: 120px; margin-right: 20px;"/>
                            <el-button :disabled="!httpValue" @click="queryBinding">检测并绑定</el-button>
                        </div>
                    </div>
                </template>
                <template v-if="active == 2">
                    <div>
                        <div>1、请重复添加记录值，在第三方域名提供商中，分别添加CNAME记录类型到主机记录www与@中：</div>
                        <el-table :data="tableData" class="demo-tabs" size="small" style="width: 70%">
                            <el-table-column prop="recordType" label="记录类型" width="180" />
                            <el-table-column prop="hostRecord" label="主机记录" width="180" />
                            <el-table-column prop="recordValue" label="记录值" />
                            <el-table-column label="操作" width="120">
                                <template #default="scope">
                                    <el-button @click="copyRecordValue(scope.row)">复制</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <div style="margin-top: 80px; display: flex; align-items: center;">
                        <div>2、确认在第三域名提供商中添加好CNAME值后，可进行下一步检测：</div>
                        <el-button style="border: 2px solid black;" @click="affirmSubmit">确认添加</el-button>
                    </div>
                </template>
                <template v-if="active == 3">
                    <div class="success-center">
                        <div style="position: absolute; bottom: 180px; display: flex; flex-direction: column; align-items: center;">
                            <div style="display: flex; flex-direction: row; align-content: center;">
                                <img :src="successIcon" style="width: 40px; height: 40px; margin-right: 30px;"/>
                                <div style="font-size: 18px; line-height: 40px;">绑定成功</div>
                            </div>
                            <div style="margin-top: 40px;">
                                <span>您已绑定域名，设置将在<span style="color: blue;">5分钟 ~ 1小时</span>后生效，请耐心等候设置生效</span>
                            </div>
                            <div style="color: grey; margin-top: 10px; margin-bottom: 90px">
                                ( 若生效时间延误可咨询对应提供商客服 )
                            </div>
                            <el-button style="width: 160px;" @click="iseeBack">我知道了</el-button>
                        </div>
                    </div>
                </template>
            </div>
        </el-card>        
    </div>
</template>

<script>
import { reactive, toRefs, nextTick, onMounted, ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { Message } from '@element-plus/icons-vue'

import api from '/@/api/commonApi'

export default {
    name: 'CreateHost',
    components: {
        
    },
    setup(props, context) {
        const route = useRoute()
        const router = useRouter()
        const state = reactive({
            successIcon: 'https://17work-1304122643.cos.ap-guangzhou.myqcloud.com/17work/0/20230614/B4CDA7BE19BA4B7F9039714C36CB1603.png',
            type: 0, // 0：加www, 1: 不加www
            active: 1,
            httpHead: 'www',
            httpValue: '',
            hostSuffix: 'com',
            taskForm: {},
            tableData: [
                { recordType: 'TXT', hostRecord: 'verify', recordValue: '2022012017102140fe33a8a417a0abe81e2c53615e7b8c' }
            ],
        })
        // 复制
        const copyRecordValue = row => {
            const input = document.createElement('input')
            // 测试地址
            input.value = row.recordValue
            document.body.appendChild(input)
            input.select()

            // 执行复制操作
            document.execCommand('Copy')

            document.body.removeChild(input)
            ElMessage.success('复制记录值成功！')
        }
        // 检测并绑定
        const queryBinding = () => {
            api.addHostSetting({
                type: state.type,
                domainName: state.type == 0 ? 'www.' + state.httpValue : state.httpValue + '.' + state.hostSuffix,
                stage: state.active + 1                
            }).then(res => {
                if (res.data != null) {
                    // 测试模拟检测成功
                    state.tableData = [
                        { recordType: 'CNAME', hostRecord: 'www', recordValue: 'www.baidu.com' }
                    ]
                    state.recordValue = ''
                    state.active = 2
                    state.taskForm = res.data
                }else{
                    ElMessage.warning("请检查你的TXT记录是否已正确添加，如果已经正确添加，请稍后再试，一般10分钟左右")
                }
            })                        
        }
        // 确认添加
        const affirmSubmit = () => {
            api.editHostSetting({
                id: state.taskForm.id,
                stage: 3
            }).then(res => {
                state.taskForm.stage = 3
                state.active = 3
            })
        }
        // 我知道了
        const iseeBack = () => {
            router.push({
                path: '/shop/domainName'
            })
        }

        onMounted(() => {
            if(route.query.id != null) {
                api.hostBingingInfo(route.query.id).then(res => {
                    state.taskForm = res.data
                    state.active = res.data.stage
                    state.type = res.data.type
                    state.httpValue = res.data.type == 0?res.data.domainName.replace('www.', ''):res.data.domainName
                    if(res.data.type == 1){
                        let hostSplit =  res.data.domainName.split('.')
                        state.hostSuffix = hostSplit[hostSplit.length - 1]
                    }
                    state.tableData = [{
                        recordType: res.data.stage == 1?'TXT':'CNAME',
                        hostRecord: res.data.stage == 1?'verify':'www',
                        recordValue: res.data.stage == 1?'2022012017102140fe33a8a417a0abe81e2c53615e7b8c':'www.ricecolor.cn'
                    }]
                })
            }
        })
        return {
            ...toRefs(state),
            copyRecordValue,
            queryBinding,
            affirmSubmit,
            iseeBack,
        }
    }
}

</script>

<style lang="scss" scoped>
.demo-tabs{
    margin-top: 20px;
    :deep(.el-table__header-wrapper .el-table__cell) {
        background: var(--el-color-primary-light-9);
        color: var(--next-bg-menuBar-light-1);
    }
}

.container-item {
    height: 80vh;
    background: var(--next-color-white);
    border: 1px solid var(--el-border-color-light);
    padding: 30px;
    border: none;
    margin-top: 15px;
    overflow-y: scroll;
}

.success-center {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
</style>